{extend name="common/visitor_iframe" /}

{block name="style"}
<style media="screen">
	#main {
		overflow:hidden;
		height:100%;
		padding-bottom:30px;
	}
	.SideBar {
		width:200px;
		float:left;
		background:#FFF;
		height:100%;
	}
	.content{
		height:100%;
		background-color:#F5F5F5;
	}
	.el-menu{
		height:100%;
	}
	#background{
		position:fixed;z-index:-1;
	}
	.el-card__body{
		overflow:hidden;
	}
	.visitor-info{
		width:100%;
		height:100%;
		list-style:none;
	}
	.visitor-info h5 {
		margin:0;
		line-height:1.8;
		text-align:left;
	}
	.real-name-btn{
		margin-left:15px;
		padding: 4px 6px;
	}
	.visitor-head {
		border-radius:10px;
		cursor:pointer;
		padding:2px;
		border:1px solid #333;
	}
</style>
{/block}

{block name="ct"}
<el-card>
	<div slot="header">
		<span>基本信息</span>
		<a href="{:url('index/visitor/editInfo')}">
		<el-button style="float: right;" size="mini" type="primary" plain>完善资料</el-button>
		</a>
	</div>
	<el-row>
		<el-col :sm="4">
			<img src="{$Visitor.head}" width="100" height="100" class="visitor-head" @click="changeHead">
		</el-col>
		<el-col :sm="20">
			<ul class="visitor-info">
				<li><h5>昵称：{$Visitor.nick_name}</h5></li>
				<li><h5>登录邮箱：{$Visitor.email}</h5></li>
				<li><h5>登录账号：{$Visitor.user_name}</h5></li>
				<li>
					<h5>
						真实姓名：{$Visitor.real_name}
						{switch name="$Visitor.real_status" }
							{case value="0"}未认证{/case}
							{case value="2"}审核中{/case}
							{case value="3"}审核未通过{/case}
							{default /}未认证
						{/switch}
						{if $Visitor.real_status neq 1}
						<el-button size="mini" type="warning" plain class="real-name-btn">
							实名认证
						</el-button>
						{/if}
					</h5>
				</li>
			</ul>
		</el-col>
	</el-row>
</el-card>
<el-dialog :visible.sync="show_upload_head_box" title="编辑头像" width="100%" top="55px"
	:close-on-click-modal="false" :lock-scroll="false" append-to-body>
	<div id="xiuxiu_tool"></div>
</el-dialog>
{/block}

{block name="script"}
<script src="//open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript">
	var main = new Vue({
		el:"#main",
		data:{
			show_upload_head_box:true,
		},
		mounted:function() {
			this.show_upload_head_box = false;
		},
		methods:{
			changeHead() {
				xiuxiu.embedSWF("xiuxiu_tool",5,"100%","435");
				var url = "{$_SERVER['REQUEST_SCHEME']}://{$_SERVER['SERVER_NAME']}{:url('index/visitor/uploadHead')}";
				xiuxiu.setUploadURL(url);
				xiuxiu.setUploadType(2);
				xiuxiu.onUploadResponse = function (res){
					res = eval('(' + res + ')');
					if(res.code == 1){
						main.$alert(res.msg,{
							callback: action => {
								window.location.reload();
							}
						})
					}else{
						main.$notify.error({title:"错误",message:res.msg});
					}
				}
				this.show_upload_head_box = true;
			},
		}
	});
</script>
{/block}
